<template>
    <a @click="back()"><el-icon><ArrowLeftBold /></el-icon><span style="font-size: 22px">返回</span></a>
    <div style="display: flex;">


    <div style="width:24%;background-color: #dbdbdb;">

    </div>

    <div id="petInfo">
<!--        宠物详情信息-->
        <!-- 当前路由可以通过 $route 在模板中访问 -->
<!--         {{ $route.params.id }}-->
        <el-card  style="max-width: 100%">
            <template #header>宠物详细信息</template>
            <div style="display: flex">
                <image-preview :src="petStore.pet.petImages" :width="'30%'" :height="'50%'"/>
                <div style="width:30%" class="PetInfoDis">
                    <p>小名:{{petStore.pet.petName}}</p>
                    <p>品种:{{ kind.petKind}}</p>
                    <p v-if="petStore.pet.petSize==0">体型:小体型</p>
                    <p v-if="petStore.pet.petSize==1">体型:中等体型</p>
                    <p v-if="petStore.pet.petSize==2">体型:大体型</p>
                    <p v-if="petStore.pet.petSex==0">性别:公</p>
                    <p v-if="petStore.pet.petSex==1">性别:母</p>

                </div>
                <div style="width:30%" class="PetInfoDis">
                    <p>年龄：{{petStore.pet.petAge}} 岁</p>
                    <p v-if="petStore.pet.petNoBaby==0">绝育:未绝育</p>
                    <p v-if="petStore.pet.petNoBaby==1">绝育:已绝育</p>
                    <div style="height: 50px;display: flex">
                        <div style="margin: 10px 0">
                            价格:
                        </div>
                        <div style="color: red;font-size: 32px;padding: 0;margin: 0">￥ {{petStore.pet.petPeice}}</div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div style="border: #bfcbd9 solid 1px;margin-bottom: 3px">
                    性格:{{petStore.pet.petCharacter}}
                </div>
                <div style="border: #bfcbd9 solid 1px;margin-bottom: 3px">
                    健康情况:{{petStore.pet.petHealth}}
                </div>
                <div style="border: #bfcbd9 solid 1px;margin-bottom: 3px">
                    疫苗:{{petStore.pet.petVaccine}}
                </div>
                <div style="border: #bfcbd9 solid 1px;margin-bottom: 3px;white-space: normal;">
                经历:
                <br/>
                &emsp;&emsp;{{petStore.pet.petText}}
            </div>
                <p v-if="petStore.pet.remark !== null">tips:{{petStore.pet.remark}}</p>
            </template>

        </el-card>

<!--        {{petStore.pet.petId}}-->



<!--        {{petStore.pet}}-->

        <el-button style="position: absolute;right: 25%" type="success" round @click="resAdopt">申请领养</el-button>


        <!-- 添加或修改领养管理对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body >
            <el-form ref="adoptRef" :model="form" :rules="rules" label-width="120px">
<!--                <el-form-item label="领养人" prop="aadoptCustomerId" diabled>-->
<!--                    <el-input v-model="form.aadoptCustomerId" placeholder="请输入领养人id"  disabled/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="宠物id" prop="adoptPetId">-->
<!--                    <el-input v-model="form.adoptPetId" placeholder="`${petStore.pet.petName}`" value="{{petStore.pet.petId}}" disabled/>-->
<!--                </el-form-item>-->
                <el-form-item label="家庭成员人数" prop="familyNum">
                    <el-input v-model="form.familyNum" placeholder="请输入家庭成员人数" type="number"  />
                </el-form-item>
                <el-form-item label="是否有小孩" prop="childrenHas">
                    <el-select v-model="form.childrenHas" placeholder="请选择是否有小孩">
                        <el-option
                                v-for="key in my_if"
                                :key="key"
                                :label="key.text"
                                :value="key.vle"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="孩子年龄描述" prop="childrenDesc">
                    <el-input v-model="form.childrenDesc" placeholder="请输入孩子年龄描述" />
                </el-form-item>
                <el-form-item label="是否有其他宠物" prop="petHas">
                    <el-select v-model="form.petHas" placeholder="请选择是否有其他宠物">
                        <el-option
                                v-for="key in my_if"
                                :key="key"
                                :label="key.text"
                                :value="key.vle"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请说明宠物种类和数量(有宠物)" prop="petDesc" size="200">
                    <el-input v-model="form.petDesc" placeholder="请输入请说明宠物种类和数量(有宠物)" style="height: 69px":rows="2"
                              type="textarea"/>
                </el-form-item>
                <el-form-item label="住房类型" prop="homeType" type="number" >
                    <el-select v-model="form.homeType" placeholder="请选择住房类型">
                        <el-option
                                v-for="key in Object.keys(house_type)"
                                :key="key"
                                :label="key"
                                :value="house_type[key]"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否允许回访" prop="adoptVisit" type="number" >
                    <el-select v-model="form.adoptVisit" placeholder="请选择是否允许回访">
                        <el-option
                                v-for="key in my_if"
                                :key="key"
                                :label="key.text"
                                :value="key.vle"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否同意承诺" prop="adoptPromise" required type="number" >
                    <el-select v-model="form.adoptPromise" placeholder="请选择是否同意承诺">
                        <el-option
                                v-for="key in my_if"
                                :key="key"
                                :label="key.text"
                                :value="key.vle"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>





    <div style="width:24%;background-color: #dbdbdb">
    </div>
    </div>

<br/><br/><br/>


</template>
<script setup lang="ts">
    import {useRoute, useRouter} from "vue-router";
    import { ref,toRefs ,reactive } from "vue";
    import usePetStore from "@/store/modules/pet";
    import {my_if,house_type,res_result} from "@/const/myData"
    import {getCustomerId} from "@/utils/auth.js";
    import { toRaw } from "@vue/reactivity";
    import {getKindList} from "@/api/pet/kind.js"




    const route = useRoute()
    const router = useRouter()
    // console.log(route.params.id)   获取路由路径上的参数

    const petStore = usePetStore()
    petStore.getPetInfoById(route.params.id);
    console.log(petStore.pet)
    const open = ref(false);
    const title = ref("");
    // //顾客点击申请领养按钮=====申请领养
    const data = reactive({
        form: {
            adoptPetId: null,
            familyNum: null,
            childrenHas: null,
            childrenDesc: null,
            petHas: null,
            petDesc: null,
            homeType: null,
            adoptVisit: 0,
            adoptPromise: null,
        },
        rules: {
        }
    });
    // todo  给申请表添加 规则
    const {form, rules } = toRefs(data);
    console.log("======================")
    console.log(route.params.id)
    form.value.adoptPetId = route.params.id
    form.value.aadoptCustomerId = getCustomerId()
    console.log("==================")
    const resAdopt=()=>{
        open.value=true
    }
    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }function reset() {
        form.value = {
            adoptPetId: null,
            familyNum: null,
            childrenHas: null,
            childrenDesc: null,
            petHas: null,
            petDesc: null,
            homeType: null,
            adoptVisit: 0,
            adoptPromise: null,
        };
    }

    /** 提交按钮 确认领养 */
    function submitForm() {
            petStore.adopt(toRaw(form.value)).then(() => {
                console.log("退出")
                    router.go(-1)
            }).catch((error: any) => {
            console.log(error)
            });
    }

//获取当前宠物的类型
    const kindList = reactive([])
    const kind = reactive({
          petKind:"",
         petKindDesc:""
    } as API.PetKind)
    getKindList().then((res: any)=>{
        kindList.value = res.rows
        console.log(res)
    })
    setTimeout(()=>{
        console.log(kindList.value)
        for (let i = 0; i < kindList.value.length; i++) {
            if (kindList.value[i].petKindId === petStore.pet.petKind) {
                console.log("当前宠物类型是")
                console.log(kindList.value[i])
                kind.petKind = kindList.value[i].petKind
                kind.petKindDesc = kindList.value[i].petKindDesc
                break;
            }
        }
    },1000)

    const back = ()=>{
        router.go(-1)
    }
</script>

<style scoped>
#petInfo{
    height: 640px;
    width: 50%;
    background-color: #dbdbdb;
    margin:0 1% ;
    opacity: 0.9;
}

    .PetInfoDis p{
        /*background-color: #bfcbd9;*/
        padding: 0;
        margin: 0;
    }

</style>
